<template>
  <div class="edit">
    <div class="edit-title">
      <span class="title-1">学习中心</span> /
      <span class="title-1">我的专题培训</span> /
      <span class="title-2">{{ zcspTitle }}</span>
    </div>
    <div class="edit-content">
      <div class="edit-content-left">
        <div class="edit-content-left-content">
          <div class="edit-content-left-content-item2">
            <div>{{ info.name }}</div>
            <div style="display: flex; justify-content: center; align-items: center;">
              <!-- 视频 -->
			        <template v-if="fileType == 'videos'">
                <div class="video-container">
                  <video-player class="video-player" id="videoDiv" ref="videoPlayer" :playsinline="true"
                    :options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)"
                    @ended="onPlayerEnded($event)" @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)"
                    @loadeddata="onPlayerLoadeddata($event)" @timeupdate="onPlayerTimeupdate($event)"
                    @canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)"
                    @statechanged="playerStateChanged($event)" @ready="playerReadied"></video-player>
                </div>
              </template>
              <!-- word等文件 -->
              <template v-else-if="fileType == 'file' || fileType == 'pdf'">
                <iframe
                  :src="src"
                  width="100%"
                  height="600px"
                  frameborder="0"
                ></iframe>
              </template>
              <!-- 图片 -->
              <template v-else-if="fileType == 'image'">
                <img :src="src" style="width: 100%; " />
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template v-if="fileType == 'videos'">
      <div class="radio-btn" v-if="types == 1">
        <!-- 已经完成的不需要锁了 -->
        <template v-if="info.temsCourseChapterList[0].process == 100">
          <el-button @click="submitItem(1)" type="primary">开始考试</el-button>
        </template>
        <template v-else>
          <el-button @click="submitItem(1)" :type="!isPlayed ? 'info' : 'primary'">开始考试</el-button>
        </template>
      </div>
      <div class="radio-close-btn" v-else-if="types == 2">
        <el-button @click="submitColseItem">关闭</el-button>
      </div>
    </template>
    <template v-else>
      <div class="radio-btn" v-if="types == 1">
        <el-button @click="submitItem" type="primary">开始考试</el-button>
      </div>
      <div class="radio-close-btn" v-else-if="types == 2">
        <el-button @click="submitColseItem">关闭</el-button>
      </div>
    </template>
  </div>
</template>
<script>
import { getTemsCourseDetail } from "@/api/exam";
import { videoPlayer } from "vue-video-player";
import define from "@/utils/define";
import { TemsCourseStudy } from "@/api/study";
import { PreviewFile } from "@/api/common";

export default {
  components: { videoPlayer },
  data() {
    return {
      zcspTitle: '理论',
      enabledMark: null,
      types: null,
      labelPosition: "top",
      formLabelAlign: {
        name: "",
        region: "",
      },
      isPlayed: false,
      info: {},
      playerOptions: {
        language: "zh-CN",
        // width: document.documentElement.clientWidth - 300,
        // height: document.documentElement.clientHeight - 350,
        // width: 1351, // 设置固定宽度
        // height: 640, // 16:9对应的高度 (800/16*9=450)
        aspectRatio: "16:9", // 设置宽高比
        sources: [
          {
            type: "video/mp4",
            src: "",
          },
        ],
        poster: "", // 封面地址
        notSupportedMessage: "加载中......", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: true, // 是否显示剩余时间功能
          fullscreenToggle: true, // 是否显示全屏按钮
          progressControl: {
            seekBar: false, // 禁止拖动
          },
          playbackRates: [1], // 只允许 1 倍速（移除其他选项）
        }
      },
      fileType: null,
        videos: ['mp4','mp3'],
        sufix: ['xlsx', 'xls', 'docx', 'doc', 'ppt', 'pptx'],
        imgs: ['jpg', 'jpeg', 'png', 'gif'],
        pdf: ['pdf'],
        currentName: '',
        src: ''
    };
  },
  created() {
    this.enabledMark = this.$route.query.enabledMark;
    this.types = this.$route.query.type;
    if (this.types == 2) {
      this.zcspTitle = '科普';
    }
    const id = this.$route.query.id
    if (id) {
      this.getList()
    }
  },
  methods: {
    submitColseItem() {
      this.$router.go(-1);
    },
    submitItem(type) {
      if (type == 1) {

        if (!this.isPlayed) {
          this.$message.warning('请先观看完视频')
          return
        }
      }
      if (!this.info.homeExam) {
        this.$message.warning('暂无考试')
        return
      }
      this.$router.push({
        path: "/zice/index",
        query: {
          id: this.info.homeExam,
        },
      });
    },
    getList() {
      getTemsCourseDetail(this.$route.query.id).then((res) => {
        if (res.code === 200) {
          this.info = res.data;
          let name = this.currentName = res.data.temsCourseChapterList[0].name;
					const fileExtension = name.split('.').pop().toLowerCase();
					const isVideos = this.videos.includes(fileExtension);
					const isSufix = this.sufix.includes(fileExtension);
					const isPdf = this.pdf.includes(fileExtension);
					const isImgs = this.imgs.includes(fileExtension);
					if (isVideos) {
						this.fileType = 'videos';
            this.playerOptions.sources[0].src = res.data.temsCourseChapterList && (define.APIURl + res.data.temsCourseChapterList[0].url)
					} else if (isSufix) {
						this.fileType = 'file';
					} else if (isPdf) {
						this.fileType = 'pdf';
					} else if (isImgs) {
						this.fileType = 'image';
					}

          if (res.data.temsCourseChapterList[0].process == 100) {
            this.isPlayed = true;
          }

					if (!isVideos) {
            setTimeout(() => {
              this.studyInterval(100)
            }, 50000);
					}
          this.loadUrls(this.info.temsCourseChapterList[0]);
        }
      });
    },
    loadUrls(data) {
      if(this.fileType  == 'videos') return;
      let file = JSON.parse(data.fileJson)
      const query = {
        fileVersionId: file.fileVersionId,
        secondFilePath: file.secondFilePath,
        fileName: file.name,
        fileDownloadUrl: file.url
      };
      PreviewFile(query).then(res => {
        this.src = res.data
      })
    },
    // 播放的回调
    onPlayerPlay(e) {
    },
    // 暂停的回调
    onPlayerPause(e) {
    },
    // 结束的回调
    onPlayerEnded(e) {
      this.isPlayed = true;
    },
    // 等待的回调
    onPlayerWaiting(e) { },
    // 播放中回调
    onPlayerPlaying(e) {

    },
    studyInterval(e) {
      if (this.info.temsCourseChapterList && this.info.temsCourseChapterList.length > 0) {
        TemsCourseStudy(this.info.temsCourseChapterList[0].id, Number(e)).then((res) => {
          this.info = res.data
        })
      }
    },
    // 视频加载完成的回调
    onPlayerLoadeddata(e) {
      // e.duration() 可获取视频的总时长
    },
    // 视频播放时，时间的回调
    onPlayerTimeupdate(e) {
      let process = (e.currentTime() / e.duration() * 100).toFixed(2)
      if (Math.floor(process % 5) === 0) {
        this.studyInterval(process)
      }
    },
    //媒体的readyState为HAVE_FUTURE_DATA或更高
    onPlayerCanplay(player) {
      // console.log('player Canplay!', player)
    },
    //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
    onPlayerCanplaythrough(player) {
      // console.log('player Canplaythrough!', player)
    },
    // 视频播放时状态回调
    playerStateChanged(e) {
      // e.timeupdate 存在时视频正在播放中，e.timeupdate 值为当前播放时间
      // e.pause 存在时视频为暂停状态
      // e.play 存在时视频为播放状态
    },
    // 视频加载完成回调，此时可以赋值 myPlayer
    playerReadied(e) {
      // this.myPlayer = e;
    },
  },
};
</script>
<style lang="scss" scoped>
.radio-btn {
  // width: 100%;
  height: 76px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: right;

  .el-button {
    margin-top: 20px;
    margin-right: 20px;
    width: 106px;
    height: 36px;
    // background-color: #2265ee;
    // border: 1px solid #2265ee;
    color: #fff;

    &:active {
      opacity: 0.8;
    }
  }
}

.edit {
  box-sizing: border-box;
  height: 100%;
  position: relative;
  padding: 12px;

  .edit-title {
    font-weight: 500;
    font-size: 14px;
    color: #536387;
    line-height: 29px;
    text-align: left;
    font-style: normal;

    .title-1 {
      color: #536387;
      padding-right: 11px;
    }

    .title-2 {
      padding-left: 11px;
      color: #323232;
    }
  }
}

.edit-content {
  display: flex;
  margin-top: 24px;

  .edit-content-left {
    flex: 8;
    background: #fff;
    box-sizing: border-box;
    padding: 24px;
    height: calc(100vh - 200px);

    .edit-content-left-title {
      width: 100%;
      height: 50px;
      font-size: 24px;
      text-align: center;
      border-bottom: 1px solid #f0f2fa;
    }
  }

  .edit-content-right {
    flex: 4;
    margin-left: 20px;
    background: #fff;
    box-sizing: border-box;
    padding: 24px;
    position: relative;

    .edit-content-right-title {
      width: 100%;
      height: 50px;
      font-size: 18px;
      line-height: 50px;
      border-bottom: 1px solid #f0f2fa;
      display: flex;

      div:nth-child(1) {
        flex: 8;
      }

      div:nth-child(2) {
        flex: 4;
      }
    }

    .edit-content-right-content {
      .edit-content-right-item {
        margin-top: 12px;
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        position: relative;
        padding-left: 16px;

        &:before {
          content: "";
          width: 4px;
          height: 20px;
          position: absolute;
          left: 0;
          top: 16px;
          background: #2265ee;
        }
      }

      .edit-content-right-item-1 {
        margin-top: 24px;
        display: flex;

        .edit-content-right-item-2 {
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border: 1px solid #2265ee;
          color: #2265ee;
          margin-right: 10px;
          border-radius: 4px;
          font-size: 14px;
        }
      }
    }
  }
}

.edit-content-right-btn {
  width: 90%;
  position: absolute;
  bottom: 30px;
  display: flex;

  .el-button {
    width: 80%;
    height: 40px;
  }

  .el-button:nth-child(2) {
    background: #2265ee;
    color: #fff;
    border: 1px solid #2265ee;

    &:active {
      opacity: 0.8;
    }
  }
}

.edit-content-left-content {
  width: 100%;
}

.edit-content-left-content-item1 {
  display: flex;
  margin-top: 24px;
  font-size: 24px;
  width: 100%;

  div:nth-child(1) {
    flex: 8;
    text-align: left;
  }

  div:nth-child(2) {
    flex: 4;
    text-align: right;
  }
}

.edit-content-left-content-item2 {
  font-size: 18px;
}

.edit-content-left-content-item2-2 {
  padding-left: 32px;

  div {
    margin-top: 32px;

    img {
      width: 100%;
      height: 300px;
    }
  }
}

.edit-content-left-content-item2-1 {
  display: flex;

  width: 100%;

  height: 100px;

  border-radius: 4px;

  margin-top: 20px;

  justify-content: space-around;

  align-items: center;

  flex-wrap: wrap; //设置换行

  gap: 10px; //每个元素间隔10px

  div {
    border: 1px solid #f1f4fb;
    display: flex;

    border-radius: 5px;

    justify-content: space-around;

    align-items: center;

    width: calc(50% - 20px); //设置所占宽度50%，再减去20px

    padding: 10px;

    box-sizing: border-box; //设置后宽高不变，不会因为间隔而变小
  }
}

::v-deep .video-player {
  padding-top: 20px;
  box-sizing: border-box;
}

::v-deep .video-js .vjs-big-play-button {
  width: 88px !important;
  height: 88px !important;
  border-radius: 50% !important;
  border: 0;
  line-height: 88px;
  font-size: 56px;
  margin-left: -50px;
  margin-top: -60px;
  object-fit: cover;
}

::v-deep .video-js .vjs-control-bar {
  height: 58px;
  line-height: 58px;
  background: rgba(0, 0, 0, 0.24) !important;
  // background: #ac8282;
}

::v-deep .vjs-button>.vjs-icon-placeholder:before {
  font-size: 40px;
}

::v-deep .video-js .vjs-control {
  font-size: 22px;
  line-height: 58px;
}

::v-deep .vjs-playback-rate .vjs-playback-rate-value {
  line-height: 58px;
}

::v-deep .vjs-button>.vjs-icon-placeholder:before {
  line-height: 60px;
}

::v-deep .vjs-remaining-time-display {
  font-size: 24px;
}

::v-deep .video-js .vjs-big-play-button {
  background-color: rgba(0, 0, 0, 0.5);
}

::v-deep .video-js .vjs-slider {
  background-color: rgba(255, 255, 255, 0.5);
}

// 视频封面
::v-deep .video-js .vjs-poster {
  background-size: cover !important;
}

.radio-close-btn {
  width: 100%;
  height: 76px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  text-align: right;

  .el-button {
    margin-top: 20px;
    margin-right: 20px;
    width: 106px;
    height: 36px;
    background-color: #2265ee;
    border: 1px solid #2265ee;
    color: #fff;
    &:active {
      opacity: 0.8;
    }
  }
}
.video-container {
  height: 640px;
  aspect-ratio: 16/9; // 设置16:9比例
  margin-top: 20px;
  
  .video-player {
    width: 100%;
    height: 100%;
  }
}
</style>
